<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.svg3dtagcloud.min.js"></script>
    <title>Magpie - 幸运抽奖</title>
    <meta name="description" content="Magpie是一款适合于活动、年会的滚动抽奖平台，风格炫酷，具有良好的视觉印象" />
    <meta name="keywords" content="Magpie,抽奖平台,年会抽奖,活动抽奖" />
    <style>
        body {
            background: black;
        }
        figure {
            position: absolute;
            margin: auto;
            top: 0; bottom: 0; left: 0; right: 0;
            width: 6.250em; height: 6.250em;
            animation: rotate 2.4s linear infinite;
        }
        .white {
            top: 0; bottom: 0; left: 0; right: 0;
            background: white;
            animation: flash 2.4s linear infinite;
            opacity: 0;
        }
        .dot {
            position: absolute;
            margin: auto;
            width: 2.4em; height: 2.4em;
            border-radius: 100%;
            transition: all 1s ease;
        }
        .dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
        .dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
        .dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
        .dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

        @keyframes rotate {
            0% { transform: rotate( 0 ); }
            10% { width: 6.250em; height: 6.250em; }
            66% { width: 2.4em; height: 2.4em; }
            100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
        }

        @keyframes dotsY {
            66% { opacity: .1; width: 2.4em; }
            77%{ opacity: 1; width: 0; }
        }
        @keyframes dotsX {
            66% { opacity: .1; height: 2.4em;}
            77%{ opacity: 1; height: 0; }
        }

        @keyframes flash {
            33% { opacity: 0; border-radius: 0%; }
            55%{ opacity: .6; border-radius: 100%; }
            66%{ opacity: 0; }
        }

    </style>
</head>
<body>
<div id="root">
    <figure>
        <div class="dot white"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </figure>
</div>
<div style="display: none">
    <script src="https://s5.cnzz.com/z_stat.php?id=1275255745&web_id=1275255745" language="JavaScript"></script>
</div>
</body>
</html>
